import React, {useEffect, useMemo, useState} from 'react';

import {IndexBar, List, NavBar, Popup, Space, Toast} from "antd-mobile";
import {DownOutline} from "antd-mobile-icons";
 import {getModelBySeriesId} from "../../api/request";

function Index({visible, seriesId, onBackHandler, onSelectHandler}) {

    const [modelList, setModelList] = useState([])




    useMemo(() => {
        console.log("useMemo", seriesId)
        if (seriesId) {
            getModelBySeriesId(seriesId).then(res => {
                if (200 == res.code) {
                    setModelList(res.result)
                } else {
                    Toast.show({
                        content: "车型获取失败，请直接输入",
                    })
                }
            })
        }

    }, [seriesId]);
    useEffect(() => {

    }, [])

    return (
        <div>
            <Popup
                visible={visible}
                bodyStyle={{height: '100vh', overflow: 'auto'}}
            >
                <div style={{height: window.innerHeight}}>
                    <NavBar back='返回' onBack={onBackHandler}>
                        选择车系
                    </NavBar>
                    <div className="mx-4 text-base">

                        {modelList.map((model,index) =>
                            <div className="  p-2" key={index}>
                                <div
                                    className="text-sm text-stone-400 border-b border-gray-250 pb-2 flex justify-between">
                                    <span> {model.name}</span>
                                    <DownOutline/>
                                </div>
                                {model.speclist.map(spec =>
                                    <div className="pl-4 mt-2" key={spec.id} onClick={() => {onSelectHandler(spec)}}>
                                        <div className="py-2 border-b border-gray-150">{spec.name}</div>
                                    </div>
                                )}

                            </div>
                        )}


                    </div>
                </div>
            </Popup>
        </div>
    );
}

export default Index;
